<template>
 
  <scroll-view class="box1" scroll-y>
	<!-- 形象照片 -->
    <view class="Image">
		<img class="u1-img" src="/static/logo.png" alt="">
	<text class="price">服务费:￥108000</text>
	<text class="deposit">定金:$3000</text>
	</view>
	<!-- 我的记录 -->
	<uni-section class="records" title="我的记录" type="line" padding>
		<view class="title_left">
			<uni-icons type="contact" size="25"></uni-icons>
			<text class="text1">服务过
				<text class="text2">17位</text>
				宝妈
			</text>
		</view>
	<view class="title_right">
		<uni-icons type="contact" size="25"></uni-icons>
		<text class="text1">服务时长
			<text class="text2">233天</text>
		</text>
	</view>
	</uni-section>
	<!-- 相关证书 -->
	<uni-section title="相关证书" type="line" padding>
		<view class="certificate">
			<uni-section class="cer_title" title="">证书类型</uni-section>
			<img class="cer_img" src="/static/logo.png" alt="">
			<img class="cer_img" src="/static/logo.png" alt="">
		</view>
	</uni-section>
	<!-- 基本信息 -->
	<uni-section title="基本信息" type="line" padding>
		<uni-group class="basic_info" mode="card">
			<view class="pro_text"> 姓名:
				<text class="info_text">张三</text>
				 </view>
				 <view class="pro_text"> 性别:
					<text class="info_text">男</text>
					 </view>
					 <view class="pro_text"> 民族:
						<text class="info_text">汉族</text>
						 </view>
						 <view class="pro_text"> 婚姻状况:
							<text class="info_text">离异</text>
							 </view>
		</uni-group>
		<uni-group class="basic_info" mode="card">
			<view class="pro_text"> 姓名:
				<text class="info_text">张三</text>
				 </view>
				 <view class="pro_text"> 性别:
					<text class="info_text">男</text>
					 </view>
					 <view class="pro_text"> 民族:
						<text class="info_text">汉族</text>
						 </view>
						 <view class="pro_text"> 婚姻状况:
							<text class="info_text">离异</text>
							 </view>
		</uni-group>
	</uni-section>
	<!-- 工作经历 -->
	<uni-section title="工作经历" type="line" padding>

	</uni-section>
	<!-- 家庭成员 -->
	<uni-section title="家庭成员" type="line" padding>

	</uni-section>
	<!-- 作品展示 -->
	<uni-section class="show_img" title="作品展示" type="line" padding>
		<img class="s_img" v-for="index in 6" src="/static/logo.png" alt="">
		
	</uni-section>
	<!-- 最新评论 -->
	<uni-section class="new_comment" title="最新评论" type="line" padding>
最新评论
	</uni-section>
  </scroll-view>
  <uni-calendar 
	ref="calendar"
	:insert="false"
	:start-date=start_date
	:range="true"
	@confirm="confirm"
	:selected="selectf"
	:disableDay="['2023-09-20','2023-09-19']"
	 />
	
  <uni-goods-nav class="goods-carts" :style="{ bottom: safeAreaInsets?.bottom + 'px' }" :buttonGroup="buttonGroup" :options="options" @buttonClick="buttonClick"  @click="onClick" />
</template>

<script lang="ts" setup>
import { ref } from 'vue';
const { safeAreaInsets } = uni.getSystemInfoSync()
  const onClick=(e)=>{
console.log(e)
uni.showToast({
					title: `点击${e.content.text}`,
					icon: 'none'
				})
  }
const buttonClick=(e)=>{
// 	console.log(e)
// uni.showToast({
// 					title: `点击${e.content.text}`,
// 					icon: 'none'
// 				})
if(e.index==0){
	open()
}
else{

}
			
}
  const options=ref([])
  const buttonGroup=ref([{
	      text: '查看档期',
	      backgroundColor: '#ff0000',
	      color: '#fff'
	    },
	    {
	      text: '立即预定',
	      backgroundColor: '#ffa200',
	      color: '#fff'
	    }
	    ])
//日历
const calendar=ref(null)
const open=()=>{
calendar.value.open()
}

const confirm = (e)=>{
	console.log(e)
}
const getDate=(date, AddDayCount = 0)=> {
		if (!date) {
			date = new Date()
		}
		if (typeof date !== 'object') {
			date = date.replace(/-/g, '/')
		}
		const dd = new Date(date)

		dd.setDate(dd.getDate() + AddDayCount) // 获取AddDayCount天后的日期

		const y = dd.getFullYear()
		const m = dd.getMonth() + 1 < 10 ? '0' + (dd.getMonth() + 1) : dd.getMonth() + 1 // 获取当前月份的日期，不足10补0
		const d = dd.getDate() < 10 ? '0' + dd.getDate() : dd.getDate() // 获取当前几号，不足10补0
		return {
			fullDate: y + '-' + m + '-' + d,
			year: y,
			month: m,
			date: d,
			day: dd.getDay()
		}
	}
const selectf=ref([

	{
						date: '2023-09-10',
						info: '已预定',
						data: {
							custom: '自定义信息',
							name: '自定义消息头'
						}
					}
	
])

const start_date=getDate(new Date()).fullDate
</script>

<style lang="scss">

.goods-carts {
	width: 105%;
		/* #ifndef APP-NVUE */
		display: flex;
		/* #endif */
		flex-direction: column;
		position: fixed;
		left: -23rpx;
		right: 0;
		/* #ifdef H5 */
		left: var(--window-left);
		right: var(--window-right);
		/* #endif */
		bottom: 0;
	
		
	
	}
.box1 {
	display: flex;
	height:auto;
	width: 100%;
	background-color: aquamarine;
	/* 形象照片 */
	.Image{
		.u1-img {
		width: 100%;
		height: 500rpx;
		.price{
	background-color: antiquewhite;
	width: 50%;

}
		.deposit{
	margin-left: 100rpx;
	right: 10rpx;
}
	}
	
	}
	/* 我的记录 */
	.records{
		.text1{
			
		}
		.text2{
			font-size: 38rpx;
			color: red;
		}
	}
	/* 相关证书 */
	.certificate{

		
		.cer_img{
         width: 300rpx;
		 height: 300rpx;
		 padding: 20rpx;
		}
		.cer_title{
			font-size: 28rpx;
			color: blue;
		}
	}
	/* 基本信息 */
	.basic_info{
		font-size: 35rpx;
		width: 500rpx;
		.pro_text{
			/* color: gainsboro; */
		}
		.basic_text{
			color: black;
		}
		
	}
	/* 作品展示 */
	.show_img{
		.s_img{
			
         width: 300rpx;
		 height: 300rpx;
		 padding: 20rpx;
		
		}
	}
	/* 最新评论 */
	.new_comment{

	}
}
</style>